import { Form, Input, Button, message } from 'antd'
import { useHistory } from "react-router-dom"
import { post } from '../../axios/index'
import consumerContext from '../../context/consumerContext'
import { useContext } from 'react'

import './login.less'

function Login () {
  let history = useHistory();
  const { dispatch } = useContext(consumerContext)
  const onFinish = (values) => {
    console.log('Success:', values);
    // dispatch({type: 'setToken', payload: {token: '123456'}})
    // history.push('/')
    post('/sysLogin', values).then(res => {
      if(res.data.code === 0){
        dispatch({type: 'setToken', payload: {token: '123456'}})
        history.push('/')
      }else{
        message.error(res.data.msg)
      }
    }).catch(error => {
      message.error("服务未响应")
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };


  return (<div className="login">
    <div className="content">
      <p className="title">TGOOD</p>
      <p className="sub-title">川开电气</p>
      <Form
        className="form"
        name="login"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item 
          className="one-int"
          name="userName"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input className="ipt" placeholder="用户名" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password placeholder="密码" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className="btn">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  </div>)
}
export default Login